<template>
	<view class="adopt-code">
		<view class="code-top">
			<view class="top-text" v-if="show">您的宠物领养码</view>
			<view class="top-text" v-else>请验证宠物领养码</view>
			<u-message-input mode="box" :breathe="false" :value="preShow" @finish="finish" :disabled-keyboard="show"></u-message-input>
		</view>
		<view class="code-bottom" v-if="show">
			<view>1、宠物交接成功后向领养人展示领养码；</view>
			<view style="margin: 20rpx 0;">
				<view>2、请务必知悉！领养码一旦验证成功，你的宠物主</view>
				<view style="margin-left: 40rpx;">页将转移至领养人名下，不可撤回；</view>
			</view>
			<view>3、强烈建议宠物顺利交接后验证。</view>
		</view>
		<view class="code-bottom" v-else>宠物交接后向送养人索要领养码，验证成功后宠物主页即会转移至你的账号。</view>
		<view :class="{'hide': show}" class="code-submit" @click="submit()">确认信息</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				gainShow: '',
				preValue: '',
				id: '',
				agreementId: '',
				newValue: ''
			}
		},
		computed: {
			// 查看验证码是从个人中心进入
			show () {
				return this.gainShow === 'true'
			},
			// 验证码预设值的显示
			preShow () {
				return this.show ? this.preValue : ''
			}
		},
		onLoad (option) {
			this.gainShow = option.gain
			if (option.code) {
				this.preValue = parseInt(option.code)
			} else if (option.id) {
				this.id = parseInt(option.id)
			} else if (option.agreementId) {
				this.agreementId = parseInt(option.agreementId)
			}
			console.log(option, this.show)
		},
		methods: {
			finish (e) {
				this.newValue = e
				this.submit()
			},
			// 确认按钮的点击
			submit () {
				this.$request(this.commonApi.verifyCode, 'POST', {
					code: this.newValue,
					agreementId: this.agreementId
				}, 'application/json').then(res => {
					let items = res.data
					if (items.code !== 200) {
						uni.showToast({
							title: items.msg,
							icon: 'none'
						})
					} else {
						uni.navigateTo({
						    url: './codeComplete'
						});
					}
				})
			},
			// 获取领养码
			getCode () {
				this.$request(this.commonApi.code + this.id, 'GET').then(res => {
					let items = res.data
					if (items.code !== 200) {
						uni.showToast({
							title: items.msg,
							icon: 'none'
						})
					} else {
						this.preValue = items.data
					}
				})
			}
		},
		mounted () {
			if (this.id !== '') {
				this.getCode()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.adopt-code {
		padding: 30rpx;
		height: 100vh;
		position: relative;
		.code-top {
			margin-top: 150rpx;
			margin-bottom: 60rpx;
			.top-text {
				font-size: 36rpx;
				font-weight: 700;
				color: #333333;
				line-height: 50rpx;
				letter-spacing: 4rpx;
				margin-bottom: 40rpx;
				text-align: center;
			}
			/deep/ .u-char-item {
				width: 100rpx!important;
				height: 120rpx!important;
				background-color: rgba(255, 154, 0, 0.12)!important;
				border-radius: 12rpx!important;
				font-size: 76rpx!important;
				font-weight: 500;
				color: #FF9A00!important;
				line-height: 106rpx!important;
				letter-spacing: 3px;
				border: none!important;
				margin: 30rpx!important;
			}
			/deep/ .u-placeholder-line {
				height: 86rpx!important;
				width: 4rpx!important;
				background-color: #FF9A00;
			}
		}
		.code-bottom {
			font-size: 26rpx;
			font-weight: 400;
			color: #FF9A00;
			line-height: 36rpx;
			padding: 0 50rpx;
		}
		.code-submit {
			position: absolute;
			bottom: 146rpx;
			width: 690rpx;
			height: 80rpx;
			background: #FF9A00;
			border-radius: 12rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80rpx;
			letter-spacing: 2rpx;
			text-align: center;
		}
		.hide {
			display: none;
		}
	}
</style>
